<template>
  <div class="route" v-loading="loading">
    <div v-if="routeList.length !== 0">
      <div class="item" v-for="item in routeList" :key="item.id">
        <div class="left">
          <div class="title" @click="toDetail(item)">{{ item.name }}</div>
        </div>
        <div class="right">
          <div class="show">
            <div class="publish-time">
              发布于：{{ formatDate(item.createTime) }}
            </div>
            <div class="info">
              <span>
                <i class="el-icon-chat-dot-square"> </i>
                {{ item.remarkCount }}
              </span>
              <span><i class="el-icon-view"></i>{{ item.views }}</span>
              <span>
                <svg
                  width="13"
                  height="13"
                  viewBox="0 0 48 48"
                  fill="rgb(250, 40, 40)"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M15 8C8.92487 8 4 12.9249 4 19C4 30 17 40 24 42.3262C31 40 44 30 44 19C44 12.9249 39.0751 8 33 8C29.2797 8 25.9907 9.8469 24 12.6738C22.0093 9.8469 18.7203 8 15 8Z"
                    fill="none"
                    stroke="#999"
                    stroke-width="4"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
                {{ item.praise }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <el-pagination
        v-show="routeList.length > 0"
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        :page-count="7"
        style="text-align: right; margin-top: 24px"
      >
      </el-pagination>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>

<script>
import defaultCover from "@/assets/defaultCover.png";
import { addRouteViews, getRouteList } from "@/api/user/route";

export default {
  name: "Route",
  props: ["id"],
  data() {
    return {
      defaultCover,
      page: 1,
      pageSize: 10,
      total: 0,
      currentPage: 1,
      routeList: [],
      loading: false,
    };
  },
  created() {
    this.getUserRoute();
  },
  methods: {
    // 获取用户发布的线路
    async getUserRoute() {
      try {
        this.loading = true;
        const res = await getRouteList({
          page: this.page,
          pageSize: this.pageSize,
          userId: this.id,
        });
        this.routeList = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取线路失败");
      } finally {
        this.loading = false;
      }
    },
    // 时间格式判断
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },
    // 时间格式化
    formatDate(timeArray) {
      if (!timeArray) return "暂无时间";
      let year = timeArray[0];
      let month = this.padZero(timeArray[1]);
      let day = this.padZero(timeArray[2]);
      let hour = this.padZero(timeArray[3]);
      let minute = this.padZero(timeArray[4]);
      let second = this.padZero(timeArray[5]) || "00";
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    // 跳转到详情页
    async toDetail(item) {
      // 新增访问量
      item.views = item.views + 1;
      const res = await addRouteViews({ id: item.id, views: item.views });
      this.$router.push(`/routeDetail/${item.id}`);
    },
    // 分页
    handleCurrentChange(page) {
      this.page = page;
      this.currentPage = page;
      this.getUserRoute();
    },
  },
};
</script>

<style lang="less" scoped>
.route {
  height: 100%;
  padding-top: 2px;
  box-shadow: 0 0 6px #ccc;
  .item {
    display: flex;
    margin: 20px;
    padding-bottom: 6px;
    height: 50px;
    border-bottom: 1px solid #ddd;
    .left {
      width: 50%;
      .title {
        margin-left: 10px;
        margin-top: 10px;
        padding-bottom: 2px;
        width: fit-content;
        max-width: 100%;
        text-align: left;
        font-size: 15px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          border-bottom: 2px solid #aaa;
        }
      }
    }
    .right {
      width: 50%;
      display: flex;
      .show {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-direction: column;
        color: #999;
        font-size: 14px;
        span {
          margin-left: 10px;
          i {
            margin-right: 4px;
          }
        }
      }
    }
  }
}
</style>